<script lang="ts" setup>
import { computed, provide } from 'vue';

interface Props {
	justify?: string;
	align?: string;
	wrap?: boolean;
	gutter?: number;
}

const props = withDefaults(defineProps<Props>(), {
	wrap: true
});

provide('parentProps', props);

const classNames = computed(() => {
	const list = ['x-row'];
	if (props.justify) {
		list.push('x-row-justify-between');
	}
	if (props.wrap) {
		list.push('x-row-wrap');
	}
	if (props.align) {
		list.push(`x-row-align-${props.align}`);
	}
	return list;
});

const style = computed(() => {
	return {
		marginLeft: -props.gutter / 2 + 'rpx',
		marginRight: -props.gutter / 2 + 'rpx'
	};
});
</script>

<template>
	<view :class="classNames" :style="style">
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
.x-row {
	display: flex;
	box-sizing: border-box;

	&-justify-between {
		justify-content: space-between;
	}

	&-align-center {
		align-items: center;
	}

	&-wrap {
		flex-wrap: wrap;
	}
}
</style>
